<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>控制中心</title>
    <script src="jquery.min.js"></script>
</head>
<body>
<div>
    <li>单次下发并发数：<input type="text" value="0" id="number" onchange="changevalue('number')"></li>
    <li>最大并发数：<input type="text"  value="100" id="gonumber" onchange="changevalue('gonumber')"></li>
    <li>类型Id(1:get 2:post 3:ws)：<input type="text" value="1" id="typeId" onchange="changevalue('typeId')"></li>
    <li>URL：<input type="text" value="http://www.baidu.com" id="url" onchange="changevalue('url')"></li>
    <li>JSON：<textarea name="" id="json" cols="80" rows="10" onchange="changevalue('json')">
                        {"reqHead":{"functionId":"HWW002002001",},"body":{"managerNo":"153",}}
                    </textarea></li>
</div>
<div style="height: 50px"></div>
<div>
    <table id="tabledt">
        <tr style="display: none;">
            <td>
                <li>单次下发并发数：<input type="text" value="1" id="number1" ></li>
                <li>最大并发数：<input type="text"  value="1000" id="gonumber1"  ></li>
                <li>类型Id(1:get 2:post 3:ws)：<input type="text" value="2" id="typeId1"  ></li>
                <li>URL：<input type="text" value="http://192.168.9.136:2130/hww/" id="url1"  ></li>
                <li>JSON：<textarea name="" id="json1" cols="80" rows="5">{"reqHead":{"functionId":"HWW002002001",},"body":{"managerNo":"153",}}</textarea></li>
            </td>
            <td width="100" onclick="selec(1)">
            </td>
            <td width="50" onclick="selec(1)">
            </td>
        </tr>

    </table>
</div>
<script>
    function changevalue(id) {

        var number = document.getElementById("number").value
        number = trim(number)
        if (number.length == 0){
            document.getElementById("number").value = "0"
        } else{
            document.getElementById("number").value = number
        }

        var gonumber = document.getElementById("gonumber").value
        gonumber = trim(gonumber)
        document.getElementById("gonumber").value = gonumber

        var typeId = document.getElementById("typeId").value
        typeId = trim(typeId)
        document.getElementById("typeId").value = typeId

        var url = document.getElementById("url").value
        url = trim(url)
        document.getElementById("url").value = url

        var json = document.getElementById("json").value
        json = trim(json)
        document.getElementById("json").value = json

        $.ajax({
            url:"http://192.168.1.70:1010/conf?number="+number+"&gonumber"+gonumber+"&typeId="+typeId+"&url="+url+"&json="+json,
            async: false,
            dataType:"jsonp",
            processData: false,
            type:"get",
            success:function(data){
            }
        })
    }

    function trim(val) {
        while ( val.indexOf("0") == 0){
            val = val.substr(1,val.length)
        }
        while ( val.indexOf(" ") == 0){
            val = val.substr(1,val.length)
        }
        val = $.trim(val)
        return val
    }

    function selec(idx) {
        if (idx == 1){
            document.getElementById("number").value = document.getElementById("number"+idx).value
            document.getElementById("gonumber").value = document.getElementById("gonumber"+idx).value
            document.getElementById("typeId").value = document.getElementById("typeId"+idx).value
            document.getElementById("url").value = document.getElementById("url"+idx).value
        }else{
            document.getElementById("number").value = document.getElementById("number1").value
            document.getElementById("gonumber").value = document.getElementById("gonumber1").value
            document.getElementById("typeId").value = document.getElementById("typeId1").value
            document.getElementById("url").value = document.getElementById("url1").value
        }
        document.getElementById("json").value = document.getElementById("json"+idx).value
    }

    function loadData(page) {
        $.ajax({
            url: "http://192.168.1.70:1011/api/handler/"+page,
            dataType: "json",
            type: "get",
            success: function (data) {
                console.log(data)
                for (let i = 0; i < data.length; i++) {
                    var obnj = data[i]
                    var $tr = $(`
                        <tr>
                            <td>
                                <li>接口： ` + obnj.function_id + `  ` + obnj.title + `</li>
                                <li>JSON：<textarea name="" id="json` + (i + 2) + `" cols="80" rows="3">` + obnj.req_json + `</textarea></li>
                            </td>
                            <td width="100" onclick="selec(` + (i + 2) + `)">
                            </td>
                            <td width="50" onclick="selec(` + (i + 2) + `)">
                            </td>
                        </tr>
                    `);
                    var $table = $("#tabledt");
                    $table.append($tr)
                }

            }
        })
    }

    $(document).ready(function () {
        loadData(1);
    })

    var curpage = 1
    $(window).scroll(

        function() {
            var scrollTop = $(this).scrollTop();
            var scrollHeight = $(document).height();
            var windowHeight = $(this).height();
            console.log(scrollTop)
            console.log(windowHeight)
            console.log(scrollHeight-100)
            if (scrollTop + windowHeight >= (scrollHeight-100)) {
                // 此处是滚动条到底部时候触发的事件，在这里写要加载的数据，或者是拉动滚动条的操作
                curpage++
                loadData(curpage);
            }
        });

</script>
</body>
</html>